<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label-width="120px" label="输入搜索：">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onApprove">审批</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row>
        <el-col :span="5" style="border-right:1px solid #e8e8e8">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-col>
        <el-col :span="19" style="padding-left: 10px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" width="55" label="序号">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名">
            </el-table-column>
            <el-table-column align="center" label="总出勤">
              <template slot-scope="scope">
                <div>{{ scope.row.count }}天</div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="110px" prop="monthRefTotal" label="结算金额">
              <template slot-scope="scope">
                <div>￥{{scope.row.actualRefTotal}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="110px" prop="actualMonthWage" label="实际工资">
              <template slot-scope="scope">
                <div>￥{{scope.row.actualMonthWage}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="100" fixed="right">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="checkRow(scope.row, scope.$index)"
                  type="text"
                  icon="el-icon-search"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>

    <div class="table-panel">
      <div class="details-steps">
      <el-steps :active="getCurrentActive(workForm.workflowNodeList,workForm.currentWorkflowNode)" :process-status="processStatus" :finish-status="finishStatus">
        <el-step
          v-for="workflowNode in workForm.workflowNodeList"
          :key="workflowNode.applyNodeId"
        >
        <template slot="title">
            <div class="steps-title">{{workflowNode.workflowNodeName}}</div>
          </template>
          <template slot="description">
            <p v-if="workflowNode.examineUserName != null"><span>审批人:</span> {{ workflowNode.examineUserName }}</p>
            <p v-if="workflowNode.examineReason != null"><span>审批反馈:</span>{{ workflowNode.examineReason }}</p>
            <p v-if="workflowNode.examineUserName == null"><span>节点审批人:</span>{{ workflowNode.workflowNodeUserList.map(ele =>ele.examineUserName).join() }}</p>
          </template>
        </el-step>
      </el-steps>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getTree,
  getPersonByTeamId,
  getPersonByserviceCorporationId,
} from "@/api/worker";
import workflowApi from '@/api/workflow/workFlow'
export default {
  data() {
    return {
      formData: {
        startToEnd: null,
        status: -1,
        mode: -1,
      },
      stepIndex:2,
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      flag: 1, //1--一级劳务公司，0--二级班组
      treeData:[],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [
        { name: "张三",count:'21',actualRefTotal:'37,680', actualMonthWage:'37,680'},
        { name: "张三",count:'21',actualRefTotal:'37,680', actualMonthWage:'37,680'},
        { name: "张三",count:'21',actualRefTotal:'37,680', actualMonthWage:'37,680'},
        { name: "张三",count:'21',actualRefTotal:'37,680', actualMonthWage:'37,680'},
      ],
      workForm: {
        type: '',
        applyNodeId: '',
        examineReason: '',
        workflowNodeList: [],
        currentWorkflowNode: {}
      },
      finishStatus: 'success'
    };
  },
  created(){
    this.getTableListExamineWorkflowApply()
  },
  methods: {
    getTableListExamineWorkflowApply() {
      workflowApi.getWorkflowApplyInfo(({applyId:this.$route.params.workflowApplyId})).then(res => {
        console.log(res)
        this.workForm = res.data
        console.log(this.workForm)
      })
    },
    // 获取劳务公司、班组树形数据
    getTreeData() {
      const id = 2;
      getTree(id).then((res) => {
        // console.log(res)
        this.treeData = res.data.data;
      });
    },
    onSubmit() {},
    onApprove(){
      this.workForm.type = 1
      workflowApi.examineWorkflow(this.workForm).then(res=>{
        console.log(res)
        this.$message({
          type: "success",
          message: "审批成功!",
        });
        this.$router.push("/approve/approve/approve")
      })
    },
    //   页面大小
    handleSizeChange(val){
      this.searchForm.pageSize = val
      this.getTableData();
    },
    //更改当前页
    handleCurrentChange(val) {
      this.searchForm.currentPage = val
      this.getTableData();
    },
    //发送请求获取表格数据
    getTableData() {
      if (this.flag === 0) {
        // 根据班组id查询班组人员————选择班组
        getPersonByTeamId(this.searchForm).then((res) => {
          console.log(res);
          this.tableData = res.data.data.records;
          this.totalData = res.data.data.total;
          // this.processTableData();
        });
      } else {
        // 根据劳务公司id查询劳务公司人员————选择劳务公司
        getPersonByserviceCorporationId(this.searchForm).then((res) => {
          console.log(res);
          this.tableData = res.data.data.records;
          this.totalData = res.data.data.total;
        });
      }
    },
    // 树状图
    handleNodeClick(res) {
      // console.log(res)
      if (res.children == null) {
        // console.log("班组")
        this.flag = 0;
        this.searchForm.team_id = res.id;
        this.searchForm.service_corporation_id = null;
        this.getTableData();
      } else {
        // console.log("劳务公司")
        this.flag = 1;
        this.searchForm.service_corporation_id = res.id;
        this.searchForm.team_id = null;
        this.getTableData();
      }
    },
    checkRow() {
      this.$router.push("/wage/month/submitDetail");
    },
    deleteRow(res) {
      this.$confirm(
        "是否确认删除月工资?",
        "月工资删除",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getCurrentActive(workflowNodeList, currentWorkflowNode) {
      let active = 0
      let processStatus = 'success'
      let that = this
      workflowNodeList.forEach(function (element, index){
        if (currentWorkflowNode !== null) {
          if (element.applyNodeId === currentWorkflowNode.applyNodeId) {
            active = index
            that.workForm.applyNodeId = element.applyNodeId
            processStatus = 'process'
          }
        } else {
          if (element.workflowNodeStatus === '3') {
            active = index
            processStatus = 'error'
          } else if (element.workflowNodeStatus === '2') {
            active = index
            processStatus = 'success'
          }
        }
      })
      this.processStatus = processStatus
      return active
    }
  },
};
</script>
